<template>
  <div class="faq">
    <NavBar></NavBar>
    <div class="content">
      <div class="left">
        <div class="tag">
          <el-tabs
            v-model="activeId"
            class="demo-tabs"
            @tab-click="handleClick"
            @tab-change="changeTab"
          >
            <el-tab-pane label="全部问题" name="0"></el-tab-pane>
            <el-tab-pane label="未解决" name="1"></el-tab-pane>
            <el-tab-pane label="已解决" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="article">
          <div v-for="item in articles" :key="item.id" class="items">
            <div class="item" @click="toDetails(item.id, item.category)">
              <div class="title">{{ item.title }}</div>
              <div class="main">{{ item.markdownContent }}</div>
              <div class="footer">
                <span>
                  <img
                    style="width: 1em"
                    :src="item.avatar"
                    alt="云客栈"
                  />&nbsp;{{ item.nickname }}
                </span>
                <span class="time">
                  <el-icon><Clock /></el-icon> {{ item.createAt }}
                </span>
                <span class="view"
                  ><el-icon><View /></el-icon> {{ item.views }}</span
                >
                <span class="like"
                  ><el-icon><Star /></el-icon>{{ item.approvals }}</span
                >
                <span class="comments"
                  ><el-icon><ChatRound /></el-icon>{{ item.comments }}
                </span>
                <span class="tags"
                  ><ul>
                    <li v-for="o in item.tags" :key="o.id">
                      <el-icon><PriceTag /></el-icon>{{ o.name }}&nbsp;
                    </li>
                  </ul></span
                >
              </div>
            </div>
          </div>
        </div>

        <el-divider />

        <div class="page">
          <el-pagination
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalNum"
            :page-sizes="[1, 2, 5, 10, 20, 30, 40, 50, 100]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            layout="prev, pager, next"
          />
        </div>
      </div>
      <div class="right">
        <Btn></Btn>
        <RecentQuestion></RecentQuestion>

        <CommonTags></CommonTags>
      </div>
    </div>
  </div>
</template>
  
  <script>
import NavBar from "@/components/NavBar.vue";
import CommonTags from "@/components/CommonTags.vue";
import RecentQuestion from "@/components/RecentQuestion.vue";
import Btn from "@/components/Btn.vue";
// 导入请求api
import { $getArticleTypes, $getArticles } from "../api/article";
import { $getFrequentTag } from "../api/tag";
export default {
  data() {
    return {
      activeId: 0,
      articleTypes: [],
      articles: [],
      pageSize: 5,
      currentPage: 1,
      totalNum: 100,
      catagory: "FAQ",
      tags: [],
    };
  },
  mounted() {
    this.getArticleTypes();
    this.loadData();
  },
  methods: {
    async loadData() {
      //初始文章
      let { data } = await $getArticles({
        page: this.currentPage,
        pageSize: this.pageSize,
        typeId: 0,
        category: this.catagory,
      });
      this.articles = data.records;
      this.totalNum = data.total;
    },
    toDetails(id, category) {
      this.$router.push({
        path: "/detail",
        query: { category: category, id: id },
      });
    },

    async getArticleTypes() {
      let { data } = await $getArticleTypes();
      this.articleTypes = data;
    },
    handleClick(tab, event) {
      // tab: TabsPaneContext, event: Event
      console.log(tab, event);
    },
    async handleCurrentChange(id) {
      // val: number
      console.log(`current page: ${id}`);

      let { data } = await $getArticles({
        page: id,
        pageSize: this.pageSize,
        typeId: this.activeId,
        category: this.catagory,
      });
      this.articles = data.records;
      this.currentPage = id;
      this.totalNum = data.total;
    },
    async changeTab(id) {
      //name: TabPaneName
      console.log("选中标签:" + id);
      this.activeName = id;
      this.currentPage = 1;

      let { data } = await $getArticles({
        page: this.currentPage,
        pageSize: this.pageSize,
        typeId: id,
        category: this.catagory,
      });

      console.log(data);

      this.articles = data.records;
      this.totalNum = data.total;
    },
    toEditA() {
      this.$router.push({ path: "/article/editor" });
    },
  },
  components: {
    NavBar,
    CommonTags,
    RecentQuestion,
    Btn,
  },
};
</script >
  
  <script setup>
</script>
  <style lang="less" scoped>
.faq {
  // height: 800px;
  background-color: #f3f3f2;
  .content {
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    padding: 25px;
    .left {
      width: 875px;
      height: auto;
      float: left;
      background-color: #ffffff;
      .tag {
        padding: 10px;
        .demo-tabs {
          font-size: 25px;
        }
      }
      .article {
        .item {
          padding: 10px 25px;
          text-align: left;
          .title {
            font-size: large;
            font-weight: bolder;
          }
          .main {
            margin-top: 8px;
            font-size: smaller;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .footer {
            margin-top: 8px;
            font-size: smaller;
            color: #b7b5b5;
            span:nth-child(n + 2) {
              margin-left: 35px;
            }
            .tags {
              ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: inline;
                li {
                  display: inline;
                }
              }
            }
          }
        }
      }
      .page {
        padding: 10px;
      }
    }
    .right {
      width: 300px;
      float: right;
      height: 400px;
    }
  }
}
</style>
  <style>
.t-25 {
  margin-top: 25px;
}
.t-10 {
  margin-top: 10px;
}
.l-8 {
  margin-left: 8px;
}
.f-l {
  font-size: large;
}
.demo-tabs > .el-tabs__content {
  padding: 0px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.items :hover {
  background-color: #f8f9fa;
}
</style>
  